<template>
    <div class="person">
        <!-- 姓：<input type="text" :value="firstname">           v-bind 单项绑定 -->
        姓：<input type="text" v-model="firstname"> <!-- v-model 双向绑定 -->
        名：<input type="text" v-model="lastname">
        全名：<span>{{ fullname }} - {{ fullname_2 }}</span>
        <button @click="changeFirstName">修改姓</button>
        <button @click="changeLastName">修改名</button>
        <button @click="changeFullName">修改全名</button>
    </div>
</template>


<!-- <script lang="ts">
export default {
    // vue 2 写法的计算属性
    computed: {
        fullname() {
            return firstname.value + lastname.value
        }
    }
}
</script> -->


<script setup lang="ts" name="Persona">

/* 
    计算属性 computed
    1. 计算属性有缓存，更高效，而方法没有缓存
    2. 计算属性默认写法是只读的 ComputedRefImpl，不可修改
*/
import { computed, ref } from 'vue';
let firstname = ref('zhang')
let lastname = ref('zhaoqiang')

// vue 3 简单写法，使用 computed 函数，接收 getter 函数作为参数

let fullname = computed(() => {
    // 简单写法，只有 getter
    return firstname.value + lastname.value
})
// 完整写法，接受一个对象，对象中包含 getter 和 setter 两个函数
let fullname_2 = computed({
    get(){
        return firstname.value + lastname.value + '2'
    },
    set(val){
        // setter 的入参 val 是最近一次对该计算属性进行修改的值，可以在外部由函数决定
        // 由于计算属性的值由原属性决定，所以计算属性如果想直接修改，也得通过在 setter 中修改原属性才行
        console.log('setter', val); // 这里注意分号的使用，如果不使用的话会被和下一行的代码连起来解析，导致错误发生
        [firstname.value, lastname.value] = val.split(' ')
    }
})

function changeFirstName(){
    firstname.value = 'aaa'
}
function changeLastName(){
    lastname.value = 'bbb'
}
function changeFullName(){
    fullname_2.value = 'stephen curry'
}
</script>

<style scoped>
.person {
    background-color: #afcfb7;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 20px;
    margin: 10px 0;
}
</style>
